<template>
  <div class="main">
    <div class="head">
      <div class="img"><img  src="../../assets/images/icon/img-headpic.png" onerror="this.src" /></div>
      <!--<div class="change">
        <img src="../../assets/images/q_1_1.png"/>
        <p>切换账号</p>
      </div>-->
      <div class="name">{{data.aac003}}</div>
      <div class="card">社保卡号：{{data.aaz500}}
      </div>

      <div class="clear"></div>
    </div>
    <div class="choose"><span>险种：</span><label @click="insureVisible=true">{{chooseName}}</label></div>
    <div class="btn_one" @click="search">查询</div>
    <mt-popup class="pop" v-model="insureVisible"  position="bottom" style="width: 100%;">
      <ul>
        <li @click="chooseId='150',chooseName='城乡居民养老保险',insureVisible=false">城乡居民养老保险</li>
        <li @click="chooseId='110',chooseName='职工养老保险',insureVisible=false">职工养老保险</li>
        <li @click="chooseId='110',chooseName='职工医疗保险',insureVisible=false">职工医疗保险</li>
      </ul>
      <div @click="insureVisible=false">取消</div>
    </mt-popup>
  </div>
</template>
<script>
  export default {
    name: 'index',
    data () {
      return {
        token:localStorage.getItem("token"),
        insureVisible:false,
        chooseId:'',
        chooseName:'请选择险种',
        name: '',
        cardNum: '',
        data:[]
      }
    },
    methods: {
      search(){
          if(this.chooseId!=""){
          this.$router.push({path:'/jiaofei_list',query:{token:this.token,card:this.cardNum,type:this.chooseId}})
          }
      },
      //获取用户信息
      getUserInfo(){
        this.$http.post("/user/get/userinfo", {}, {params:{access_token:this.token}}).then(res => {
          console.log(res)
          if (res.success) {
            this.cardNum=res.body.certnum;
//            this.cardNum='612428197403220629';
            this.getData();
          }
        });
      },
      //获取社保卡信息
      getData(){
        this.$http.get("/jkakrs_sbk_004", {params: {access_token: this.token, AAC002: this.cardNum}}).then(res => {
          console.log(res)
          if (res.success) {
            this.data = res.body;
          }
        });
      },
    },
    created(){
        this.getUserInfo();
    }
  }
  document.body.style.background="#F2F2F2";
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .head{width: 100%;margin-bottom: 10px;padding:12px 0 12px 15px;box-sizing: border-box;background: #FFFFFF;}
  .head .img{width: 45px;height: 45px;border-radius: 100%;box-sizing: border-box;float:left;margin-right: 25px;overflow:hidden;}
  .head .img img{width: 100%;}
  .head div.name{font-size: 15px;margin-top: 5px;}
  .head div.card{font-size: 12px;margin-top: 5px;color: #888888;}

  .head .change{float:right;right: 50px;text-align: center;width: 60px;font-size: 12px;color: #6CACDE;}
  .head .change img{width: 30px;margin-bottom: 5px;margin-top: 2px;}
  .clear {zoom:1;clear:both;}
  .clear :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

  .choose{line-height: 51px;background: #ffffff url("../../assets/images/icon/icon-timedh.png") no-repeat right 4% center;background-size: 18px;}
  .choose span{display: inline-block; width: 16%;margin-left: 4%;}
  .choose label{display: inline-block; width: 80%;color: #999999;}
  .pop{background:#F2F2F2; }
  .pop li{line-height: 50px;font-size: 14px; text-align: center;background: #ffffff;}
  .pop li:not(:last-child){border-bottom: 1px solid #DFDFDF;}
  .pop>div{line-height: 50px;text-align: center;margin-top: 10px;background: #ffffff;font-size: 16px;color: #3399FF;}
  .btn_one{width: 92%;margin: 40px auto;background: #3399FF;border-radius: 6px;line-height: 45px;font-size: 18px;
    color: #FFFFFF;text-align: center;}
</style>
